import React, { useState, ReactNode} from 'react';
import { Button, Tooltip } from 'antd';
import {
  ExpandOutlined,
  ShrinkOutlined,
  LeftOutlined,
  RightOutlined,
  UpOutlined,
  DownOutlined,
} from '@ant-design/icons';
import styles from './CollapsibleCard.module.css';

export type CollapseDirection = 'left' | 'right' | 'up' | 'down';
export type CardState = 'normal' | 'maximized' | 'collapsedLeft' | 'collapsedRight' | 'collapsedUp' | 'collapsedDown';

export interface CollapsibleCardProps {
  title: React.ReactNode;
  children: ReactNode;
  extra?: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  defaultState?: CardState;
  collapseDirections?: CollapseDirection[];
  onChange?: (state: CardState) => void;
  wrapperClassName?: string;
}

const CollapsibleCard: React.FC<CollapsibleCardProps> = ({
  title,
  children,
  extra,
  className = '',
  style = {},
  defaultState = 'normal',
  collapseDirections = ['left', 'down'],
  onChange,
  wrapperClassName = '',
}) => {
  const [cardState, setCardState] = useState<CardState>(defaultState);

  const handleStateChange = (newState: CardState) => {
    setCardState(newState);
    if (onChange) {
      onChange(newState);
    }
  };

  const getCardClassName = () => {
    let classNames = [styles.collapsibleCard];
    
    if (className) {
      classNames.push(className);
    }
    
    return classNames.join(' ');
  };
  
  const getWrapperClassName = () => {
    let classNames = [styles.cardWrapper];
    
    if (cardState === 'maximized') {
      classNames.push(styles.maximized);
    } else if (cardState === 'collapsedLeft') {
      classNames.push(styles.collapsedLeft);
    } else if (cardState === 'collapsedRight') {
      classNames.push(styles.collapsedRight);
    } else if (cardState === 'collapsedUp') {
      classNames.push(styles.collapsedUp);
    } else if (cardState === 'collapsedDown') {
      classNames.push(styles.collapsedDown);
    }
    
    if (wrapperClassName) {
      classNames.push(wrapperClassName);
    }
    
    return classNames.join(' ');
  };

  const renderExpandIcon = () => {
    if (cardState === 'normal') {
      return (
        <Tooltip title="全屏">
          <Button 
            type="text" 
            size="small"
            icon={<ExpandOutlined />}
            onClick={() => handleStateChange('maximized')}
            className={styles.actionButton}
          />
        </Tooltip>
      );
    } else if (cardState === 'maximized') {
      return (
        <Tooltip title="退出全屏">
          <Button 
            type="text" 
            size="small"
            icon={<ShrinkOutlined />}
            onClick={() => handleStateChange('normal')}
            className={styles.actionButton}
          />
        </Tooltip>
      );
    }
    return null;
  };

  const renderCollapseIcons = () => {
    if (cardState !== 'normal') return null;
    
    return (
      <>
        {collapseDirections.includes('left') && (
          <Tooltip title="向左折叠">
            <Button 
              type="text" 
              size="small"
              icon={<LeftOutlined />}
              onClick={() => handleStateChange('collapsedLeft')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
        {collapseDirections.includes('right') && (
          <Tooltip title="向右折叠">
            <Button 
              type="text" 
              size="small"
              icon={<RightOutlined />}
              onClick={() => handleStateChange('collapsedRight')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
        {collapseDirections.includes('up') && (
          <Tooltip title="向上折叠">
            <Button 
              type="text" 
              size="small"
              icon={<UpOutlined />}
              onClick={() => handleStateChange('collapsedUp')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
        {collapseDirections.includes('down') && (
          <Tooltip title="向下折叠">
            <Button 
              type="text" 
              size="small"
              icon={<DownOutlined />}
              onClick={() => handleStateChange('collapsedDown')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
      </>
    );
  };

  const renderCollapsedContent = () => {
    let expandIcon;
    let direction = '';
    
    if (cardState === 'collapsedLeft') {
      expandIcon = <RightOutlined />;
      direction = 'left';
    } else if (cardState === 'collapsedRight') {
      expandIcon = <LeftOutlined />;
      direction = 'right';
    } else if (cardState === 'collapsedUp') {
      expandIcon = <DownOutlined />;
      direction = 'up';
    } else if (cardState === 'collapsedDown') {
      expandIcon = <UpOutlined />;
      direction = 'down';
    }
    
    return (
      <div className={`${styles.collapsedContent} ${styles[`collapsed${direction.charAt(0).toUpperCase() + direction.slice(1)}Content`]}`}>
        <div className={styles.collapsedTitle}>
          {title}
        </div>
        <Tooltip title="展开">
          <Button 
            type="text" 
            size="small"
            icon={expandIcon}
            onClick={() => handleStateChange('normal')}
            className={styles.actionButton}
          />
        </Tooltip>
      </div>
    );
  };

  if (cardState === 'collapsedLeft' || cardState === 'collapsedRight' || 
      cardState === 'collapsedUp' || cardState === 'collapsedDown') {
    return (
      <div className={getWrapperClassName()} style={style}>
        <div className={getCardClassName()}>
          {renderCollapsedContent()}
        </div>
      </div>
    );
  }

  return (
    <div className={getWrapperClassName()} style={style}>
      <div className={getCardClassName()}>
        <div className={styles.cardHeader}>
          <div className={styles.cardTitle}>{title}</div>
          <div className={styles.cardActions}>
            {extra}
            {renderExpandIcon()}
            {renderCollapseIcons()}
          </div>
        </div>
        <div className={styles.cardContent}>
          {children}
        </div>
      </div>
    </div>
  );
};

export default CollapsibleCard; 